import { useEffect, useState } from "react";
import React, { FC } from "react";
import { observer, inject } from "mobx-react";
import { Layout, Menu, Row, Col, Space } from "antd";
import { Outlet } from "react-router-dom";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
} from "@ant-design/icons";
import Langbox from "../../pages/components/Langbox";
import UserHead from "./UserHead";
import { ITStore } from "../../store";

type TProp = {
  store: ITStore;
};

const { Header, Sider, Content } = Layout;

const Userlayout: FC<TProp | any> = ({ store }: TProp): JSX.Element => {
  const {
    dictionaryStore: { getFullDict },
    languageStore: { lang, getAllLanguage, changeLangCur },
  } = store;
  const [collapsed, setCollapsed] = useState(false);

  useEffect(() => {
    const getData = async () => {
      // 请求所有语言
      await getAllLanguage(false);

      // 请求所有字典和值
      await getFullDict(false);
    };

    let currentLang = localStorage.getItem("lang") || "en";
    changeLangCur(currentLang);

    getData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <Layout>
      <Sider
        trigger={null}
        collapsible
        collapsed={collapsed}
        style={{ background: "#fff" }}
      >
        <div className="logo" style={{ height: 32, margin: 16 }} />
        <Menu
          theme="light"
          mode="inline"
          defaultSelectedKeys={["1"]}
          items={[
            {
              key: "1",
              icon: <UserOutlined />,
              label: lang["languserinfo"],
            },
          ]}
        />
      </Sider>
      <Layout className="site-layout">
        <Header style={{ padding: 0, background: "#fff" }}>
          <Row>
            <Col flex="auto">
              {React.createElement(
                collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
                {
                  className: "trigger",
                  onClick: () => setCollapsed(!collapsed),
                }
              )}
            </Col>
            <Col flex="150px">
              <Space style={{ float: "right" }}>
                <div className="headbox">
                  <UserHead />
                </div>
                <div className="langbox">
                  <Langbox />
                </div>
              </Space>
            </Col>
          </Row>
        </Header>
        <Content
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: 280,
            background: "#fff",
          }}
        >
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default inject("store")(observer(Userlayout));
